<template>
  <div class="divBox">
      <el-card>
         <div class="clearfix">
            <div class="container">
              <el-form size="small" label-width="100px">
            <el-form-item label="订单状态：" v-if="checkPermi(['admin:mortgage:status:count'])">
              <el-radio-group v-model="tableFrom.status" type="button" @change="seachList">
                <el-radio-button label="all">全部 {{ '(' +mortgageStatus.all?mortgageStatus.all:0 + ')' }}</el-radio-button>
                <el-radio-button label="0">受理中 {{ '(' +mortgageStatus.accept?mortgageStatus.accept:0+ ')' }}</el-radio-button>
                <el-radio-button label="1">洽谈中 {{ '(' +mortgageStatus.negotiation?mortgageStatus.negotiation:0+ ')' }}</el-radio-button>
                <el-radio-button label="2">达成合作 {{ '(' +mortgageStatus.cooperation?mortgageStatus.cooperation:0+ ')' }}</el-radio-button>
                <el-radio-button label="3">驳回 {{ '(' +mortgageStatus.rejected?mortgageStatus.rejected:0+ ')' }}</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="时间选择：" class="width100">
              <el-date-picker v-model="timeVal" value-format="yyyy-MM-dd" format="yyyy-MM-dd" size="small" type="daterange" placement="bottom-end" placeholder="自定义时间" style="width: 220px;" @change="onchangeTime" />
            </el-form-item>
             <el-form-item label="用户昵称：" class="width100">
              <el-input v-model="tableFrom.keywords" placeholder="请输入用户昵称" class="selWidth" size="small" clearable>
                <el-button slot="append" icon="el-icon-search" size="small" @click="seachList" />
              </el-input>
            </el-form-item>
          </el-form>
            </div>
          </div>
          <el-table
            ref="list"
            v-loading="listLoading"
            :data="tableData.data"
            size="mini"
            class="table"
            highlight-current-row
            row-key="id"
          >
            <el-table-column prop="id" label="ID" min-width="50" fixed="left" />
            <el-table-column prop="uid" label="用户ID" min-width="60" fixed="left" />
            <el-table-column prop="nickname" label="用户昵称" min-width="120" />
            <el-table-column prop="phone" label="用户手机号" min-width="100" />

            <el-table-column label="日利率(现/转)" min-width="120" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.rateIrrDay}}</span> / <span>{{scope.row.saveRateIrrDay}}</span>
                </template>
            </el-table-column>
             <el-table-column label="月利率(现/转)" min-width="120" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.rateIrrMonth}}</span> / <span>{{scope.row.saveRateIrrMonth}}</span>
                </template>
            </el-table-column>
             <el-table-column label="年化利率(现/转)" min-width="120" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.rateIrrYear}}</span> / <span>{{scope.row.saveRateIrrYear}}</span>
                </template>
            </el-table-column>
             <el-table-column label="每月还款(现/转)元" min-width="120" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.repayAmount}}</span> / <span>{{scope.row.saveRepayAmount}}</span>
                </template>
            </el-table-column>
            <el-table-column label="每月节省金额(元)" prop="subIrrAmount" min-width="120" align="center" />
            <el-table-column label="节省后的年化利率" prop="subIrrYear" min-width="120" align="center" />
            <el-table-column label="原还款总额" prop="total" min-width="120" align="center" />
            <el-table-column label="累积节省(元)" prop="cumulativeAmount" min-width="120" align="center" />
            <el-table-column label="还款期限" prop="calcPeriods" min-width="80" align="center" />
            <el-table-column label="审核说明" prop="reason" min-width="200" align="center" />
            <el-table-column label="状态" prop="status" min-width="80" align="center">
                <template slot-scope="scope">
                   <el-tag :type="getStatusType(scope.row.status)"  effect="dark" size="mini">{{getStatusText(scope.row.status)}}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="申请时间" prop="time" min-width="140" align="center" />
            <el-table-column label="达成合作时间" prop="passTime" min-width="140" align="center" />
            <el-table-column label="驳回时间" prop="reasonTime" min-width="140" align="center" />
             
              <el-table-column label="操作" width="150" fixed="right" align="center">
                <template slot-scope="scope">
                  <el-button type="primary"  size="mini" @click="handleEdit(scope.row)"  v-hasPermi="['admin:mortgage:update']">审核</el-button>
                  <el-button type="danger"  size="mini" @click="handleDel(scope.row.id,scope.$index)"  v-hasPermi="['admin:mortgage:delete']">删除</el-button>
                </template>
              </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
            :page-sizes="[20, 40, 60, 80]"
            :page-size="tableFrom.limit"
            :current-page="tableFrom.page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.total"
            @size-change="handleSizeChange"
            @current-change="pageChange"
            />
        </div>
      </el-card>
           <el-dialog
      title="审核"
      :visible.sync="mDialogVisible"
      width="300"
      :before-close="handleClose">
          <el-form :model="editFrom" :rules="editRules" ref="ruleForm" size="small" label-width="100px">
            <el-form-item label="审核状态：" prop="status">
              <el-select v-model="editFrom.status" placeholder="请选择状态">
                <el-option label="受理中" :value="0"></el-option>
                <el-option label="洽谈中" :value="1"></el-option>
                <el-option label="达成合作" :value="2"></el-option>
                <el-option label="驳回" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="审核说明：" prop="reason">
              <el-input type="textarea" v-model="editFrom.reason" maxlength="15" show-word-limit></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="turnEdit('ruleForm')">确 定</el-button>
          </span>
      </el-dialog>
  </div>
</template>

<script>
import AdvantageEdit from '@/components/Advantage/edit.vue'
import {mortgageListApi, mortgageStatusApi,mortgageUpdateApi,mortgageDeleteApi} from '@/api/mortgage'
import { checkPermi } from "@/utils/permission"; // 权限判断函数
export default {
    components: {
        AdvantageEdit
    },
    computed: {
        getStatusType: function() {
            return (status) => {
                switch(status){
                    case 0: return ''
                    case 1: return 'info'
                    case 2: return 'success'
                    case 3: return 'danger'
                }
            }
        },
        getStatusText: function() {
            return (status) => {
                switch(status){
                    case 0: return '受理中'
                    case 1: return '洽谈中'
                    case 2: return '达成合作'
                    case 3: return '已驳回'
                }
            }
        }
    },
  data() {
    return {
        // 列表数据
        tableData: {
            data: [],
            total: 0
        },
        tableFrom: {
            status: 'all',
            dateLimit: '',
            keywords: '',
            page: 1,
            limit: 10
        },
        listLoading: true,
        mortgageStatus: {},
        timeVal: '',
        mDialogVisible: false,
        editFrom: {
          status: 0,
          reason: '',
          id: null
        },
        editRules: {
          status: [
            { required: true, message: '请选择审核状态', trigger: 'change' }
          ],
          reason: [
            { required: true, message: '请输入审核说明', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
          ],
        }
    }
  },
  mounted() {
      this.getList()
      this.getStatusNum()
  },
  methods: {
      checkPermi,
      // 获取房贷计算列表
     getList() {
        mortgageListApi(this.tableFrom).then(res => {
          this.tableData.data = res.list || [];
          this.tableData.total = res.total;
          this.listLoading = false
          }).catch(
              this.listLoading = false
          )
      },
      // 获取状态
      getStatusNum() {
          mortgageStatusApi({dateLimit:this.tableFrom.dateLimit}).then(res => {
              this.mortgageStatus = res
          })
      },
       pageChange(page) {
        this.tableFrom.page = page
        this.getList()
      },
      handleSizeChange(val) {
        this.tableFrom.limit = val
        this.getList()
      },
        //搜索
      seachList() {
        this.tableFrom.page = 1
        this.getList()
        this.getStatusNum() 
      },
      // 具体日期
      onchangeTime (e) {
        this.timeVal = e;
        this.tableFrom.dateLimit = e ? this.timeVal.join(',') : ''
        this.tableFrom.page = 1
        this.getList();
        this.getStatusNum();
      },
      // 删除
      handleDel(id,idx) {
         this.$confirm('此操作将永久删除该申请, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          mortgageDeleteApi({id}).then(() => {
            this.$message.success('删除成功!')
            this.tableData.data.splice(idx, 1)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      // 编辑
      turnEdit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            mortgageUpdateApi(this.editFrom).then(res => {
              this.$message.success('修改成功!')
               this.getList()
               this.getStatusType()
            })
            this.mDialogVisible = false
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleClose(done) {
          done();
      },
      handleEdit({id,status,reason = ''}) {
        this.editFrom.id = id
        this.editFrom.status = status
        this.editFrom.reason = reason
        this.mDialogVisible = true
      }
  }
}
</script>

<style lang="scss" scoped>

</style>
